<template>
    <div>
        <h2>物流相关信息</h2>
        <div class="logistics-info-header">
            <div class="logistics-info-header-left">
                <div class="logistics-status blue" :style="{ color: getStatusColor(data.logisticsStatus) }">{{
                    getText(data.logisticsStatus) }}
                </div>
                <div class="logistics-company">{{ data.logisticsCompany }}</div>
                <div class="logistics-no">{{ data.logisticsNo }}</div>
            </div>
        </div>
        <ul v-for="item in data.logisticsInfo" :key="item.time" class="logistics-info-list">
            <li>
                <div class="logistics-info-list-time">{{ item.time }}</div>
                <div class="logistics-info-list-content">{{ item.content }}</div>
            </li>
        </ul>
        <button v-check="check">查看物流详情</button>
    </div>

</template>

<script>
export default {
    props: ['data'],
    methods: {
        getStatusColor(logisticsStatus) {
            switch (logisticsStatus) {
                case 0:
                    return 'red'; // 未发货颜色
                case 1:
                    return 'orange'; // 已发货颜色
                case 2:
                    return 'green'; // 已签收颜色
                case 3:
                    return 'blue'; // 未签收颜色
                default:
                    return 'black'; // 未知状态颜色
            }
        },
        getText(logisticsStatus) {
            switch (logisticsStatus) {
                case 0:
                    return '未发货';
                case 1:
                    return '已发货';
                case 2:
                    return '已签收';
                case 3:
                    return '未签收';
                default:
                    return '未知状态';
            }
        }
    }
}
</script>